<template>
  <div>
    <el-button class="add-label" type="primary" @click="add">新增</el-button>
    <el-table class="table-box" :header-cell-style="{ background: '#F5F7FA', color: '#909399' }" :data="labelTableData"
      style="width: 100%">
      <el-table-column prop="name" label="名称" />
      <!-- <el-table-column prop="count" label="标签数量" /> -->
      <el-table-column prop=" " label="快捷键">
        <template slot-scope="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" width="180px">
        <template slot-scope="{ row }">
          <el-button type="text" @click="delLabel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-nb-pagination" v-if="labelLisTotal > 10">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper" :page-size="10"
        @current-change="handleCurrentChange" :total="labelLisTotal">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="showAdd" title="添加标签" width="800px" @onClose="clearData">
      <el-form :rules="rules" ref="form" label-position="left" label-width="124px">
        <el-form-item label="标签">
          <el-input v-model="label_name" maxlength="40" minlength="1" placeholder="最多可输入40字" size="medium">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button type="info" @click="clearData">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAllAnnLabels, addAnnLabel, delAnnLabel } from '@/api/annLabel'
export default {
  data() {
    return {
      label_name: null,
      ann_task_id: this.$route.query.ann_task_id,
      dataset_id: this.$route.query.id,
      labelCurrent: 1,
      labelTableData: [],
      labelLisTotal: 0,
      showAdd: false,
      rules: {},
      labels: [{ name: '' }]
    };
  },
  components: {

  },
  watch: {

  },
  methods: {

    async getLabelsLis() {
      let res = await getAllAnnLabels({ annTaskId: this.ann_task_id })
      console.log(res)
      this.labelTableData = res.data
      console.log(this.labelTableData)
    },
    handleCurrentChange(val) {
      this.labelCurrent = val
    },
    add() {
      this.showAdd = true
    },
    async delLabel(id) {
      await delAnnLabel({ id: id })
      this.getLabelsLis()
    },
    async submit() {
      console.log("submit")
      await addAnnLabel({ name: this.label_name, ann_task_id: this.ann_task_id })
      this.getLabelsLis()
      this.showAdd = false
    },
    clearData() {
      this.showAdd = false
    },
    verifyLabels() {
      let l = this.labels.map((e) => e.name);
      let hash = {};
      l.forEach((e, i) => {
        if (!e) {
          l.splice(i, 1);
        }
      })
      for (let i in l) {
        if (hash[l[i]]) {
          return true;
        }
        hash[l[i]] = true;
      }
      return false;
    },
  },
  mounted() {
    this.getLabelsLis()
  },
};
</script>

<style lang="less" scoped>
.add-label {
  margin-top: 12px;
}

.table-box {
  margin-top: 8px;
}

.small {
  height: 500px;
  background: #4285f4;
  line-height: 500px;
  text-align: center;
}
</style>
